<script>
  // import request from "../../../utils/request"

  // export default {
  //   name: "agreement",
  //   methods: {
  //     open() {
  //       return new Promise((resolve, reject) => {
  //         this.$refs.popup.open()
  //         this.resolve = resolve
  //         this.reject = reject
  //       })
  //     },
  //     close() {
  //       this.$refs.popup.close()
  //     },
  //   },
  //   data() {
  //     return {
  //       content: "",
  //       resolve: null,
  //       reject: null,
  //     }
  //   },
  //   created() {
  //     //获取协议内容
  //     request({
  //       url: "sysPam/getSysParam",
  //       data: {
  //         pamCode: "courseTakeOrderAgreement",
  //       },
  //       errorHandle: true,
  //       showLoading: true,
  //     }).then((data) => {
  //       this.content = data.pamValue
  //     })
  //   },
  //   props: {
  //     hasAgreement: Boolean,
  //   },
  //   emits: ["update:hasAgreement"],
  // }
</script>

<template>
  <uni-popup
    ref="popup"
    type="bottom"
    @change="
      (val) => {
        if (!val.show) {
          if (!hasAgreement) {
            reject()
          }
        }
      }
    "
  >
    <view class="container">
      <view class="header">
        <view class="placeholder"></view>
        <view class="title">用户服务协议</view>
        <view
          class="agree-btn"
          @click="
            () => {
              $emit('update:hasAgreement', true)
              resolve()
              close()
            }
          "
          >同意</view
        >
      </view>
      <view class="content-container">
        <!--        <view v-html="content" class="content"></view>-->
        <rich-text
          :nodes="content"
          class="content"
        ></rich-text>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
  // 封装的结构模板
  .container {
    height: 70vh;
    background: #fff;
    border-radius: 30rpx 30rpx 0 0;
    .header {
      height: 130rpx;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      justify-content: space-between;
      .placeholder {
        width: 120rpx;
      }
      .title {
        font-size: 36rpx;
        color: var(--text-color);
      }
      .agree-btn {
        width: 120rpx;
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--theme-color);
        color: var(--text-color-white);
        font-size: 30rpx;
        border-radius: 35rpx;
      }
    }
    // 组件保证一下
    .content-container {
      height: calc(70vh - 130rpx);
      overflow: auto;
      padding: 0 30rpx;
      .content {
        width: 100%;
        padding: {
          top: 30rpx;
          bottom: calc(30rpx + env(safe-area-inset-bottom));
        }
        word-break: break-all;
      }
    }
  }
</style>
